<!-- Rename Entity Dialog -->
<div>
    <div bsModal #renameEntityModal="bs-modal" class="modal fade" id="renameEntityModal" tabindex="-1" role="dialog"
         aria-labelledby="renameEntityModalLabel" role="dialog" aria-hidden="true" *ngIf="isOpen()" [config]="{ backdrop: true }"
         (onShown)="renameEntityInput.focus()" (onHidden)="close()">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" aria-hidden="true" (click)="cancel()">
                        <span class="pficon pficon-close"></span>
                    </button>
                    <h4 class="modal-title" id="renameEntityModalLabel">{{ title }}</h4>
                </div>
                <div class="modal-body">
                    <!-- Warning about what will happen -->
                    <div class="alert alert-info" *ngIf="shouldShowWarning()">
                        <span class="pficon pficon-info"></span>
                        <strong>You should know!</strong>
                        <span>{{ warning }}</span>
                    </div>
                    <!-- Form to enter the new name -->
                    <p *ngIf="shouldShowMessage()">{{ message }}</p>
                    <form id="renameentity-form" class="form-horizontal" #renameEntityForm="ngForm" data-dismiss="modal">
                        <div class="form-group currentNameGroup">
                            <label class="col-sm-2 control-label" for="currentName">Current name</label>
                            <div class="col-sm-10">
                                <span id="currentName">{{ originalName }}</span>
                            </div>
                        </div>
                        <div class="form-group entityNameGroup">
                            <label class="col-sm-2 control-label required" for="entityName">New name</label>
                            <div class="col-sm-10">
                                <input name="entityName" type="text" id="entityName" class="form-control" #renameEntityInput
                                       placeholder="Enter a {{ type }} Name" pattern="{{ validationPattern }}" #defName="ngModel"
                                       required [(ngModel)]="newName" (ngModelChange)="validateName($event)">
                                <div class="form-error-message error" *ngIf="newName !== originalName && _alreadyExists">{{ type }} already exists.</div>
                                <form-error-message [inputModel]="defName" [type]="'required'">Name is required.</form-error-message>
                                <form-error-message [inputModel]="defName" [type]="'pattern'" [alwaysOn]="true">Enter a valid name (only alpha-numeric characters are allowed - no whitespace).</form-error-message>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="notice-of-required modal-notice-of-required">The fields marked with <span class="required-icon">*</span> are required.</div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" (click)="rename()"
                            [disabled]="!renameEntityForm.form.valid || _alreadyExists">Rename</button>
                    <button type="button" class="btn btn-default" (click)="cancel()">Cancel</button>
                </div>
            </div>
        </div>
    </div>
</div>
